import { View,Image, Block,Text } from '@tarojs/components'
import React, { useState } from 'react'
import './index.scss'

export default function ProGress(props) {
  const {list,StepInfo,isEstablish} = props
  let width = StepInfo.Current,sums = StepInfo.Sum
  return (
    <View className='pro-gress'>
      <View className="width615 flexs">
        <View className="bg1">
          <View className="bg2" style={{'width':width + '%'}}></View>
        </View>
        <View className="yuans">
          {/* <Image src={require('@/static/yuan.png')}></Image> */}
          {sums?.map((item, index)=>{
            return <Block key={index}>
              {width > 100 / sums * item || (width / sums) == (100 / sums) || width == 100 / sums * item?<Image src={require('@/static/yuan.png')}></Image>:null}
              <View className="width32" style={{visibility:(index == 1 && isEstablish)?'hidden':''}}>
                <View></View>
              </View>
            </Block>
          })}
        </View>
      </View>
      {list.length == 3?
      <View className="p_bot size20 text-gray">
        <View>已报名<Text>{list[0]}</Text>人</View>
        <View style={{visibility:isEstablish?'hidden':''}}><Text>{list[1]}</Text>人成团</View>
        <View><Text>{list[2]}</Text>人满场</View>
      </View>:null}
    </View>
  )
}
